<template>
  <div class="my">
    <div style="height: 220px">
      <van-image
        round
        width="8rem"
        fit="cover"
        height="8rem"
        class="picture"
        :src="img"
      />
      <h2 class="nickname">{{ this.showFootTab.user }}</h2>
    </div>

    <a href="#">
      <div class="bar">
        <h2 class="barText">我的任务</h2>
        <van-icon name="arrow" class="barIcon" /></div
    ></a>
    <a href="#">
      <div class="bar">
        <h2 class="barText">我的选课</h2>
        <van-icon name="arrow" class="barIcon" /></div
    ></a>
    <a href="#">
      <div class="bar">
        <h2 class="barText">推荐给好友</h2>
        <van-icon name="share-o" class="barIcon" /></div
    ></a>

    <van-button type="danger" class="cancel" @click="cancel"
      >退出登录</van-button
    >
  </div>
</template>
<script>
import router from "@/router";
export default {
  data() {
    return {
      img: require("../assets/touxiang.jpg"),
    };
  },
  methods: {
    cancel() {
      sessionStorage.setItem("isAuth", false);
      this.showFootTab.isShow = false;
      router.push("/");
    },
  },
};
</script>
<style scoped="less">
.my {
  height: 100%;
  width: 100%;
  padding-bottom: 5%;
}
.bar {
  margin-top: 5%;
  border-top: 2px solid #dddddd;
  border-bottom: 2px solid #dddddd;
  height: 50px;
  width: 100%;
  display: table;
}
.barText {
  vertical-align: middle;
  display: table-cell;
  padding-left: 8%;
}
.barIcon {
  font-size: 30px;
  vertical-align: middle;
  display: table-cell;
}
.cancel {
  width: 100%;
  margin-top: 30px;
}
.picture {
  position: absolute;
  top: 5%;
  left: 10%;
}
.nickname {
  position: absolute;
  top: 8%;
  left: 50%;
}
</style>